<template>
  <el-dialog
    v-model="visible"
    :show-close="false"
    :fullscreen="isFullscreen"
    width="50%"
    append-to-body
    @close="handleClose"
  >
    <template #header>
      <div class="flex-x-between">
        <span>处理过程</span>
        <div class="dialog-toolbar">
          <!-- 关闭按钮 -->
          <el-button circle @click="handleClose">
            <template #icon>
              <Close />
            </template>
          </el-button>
        </div>
      </div>
    </template>

    <el-card shadow="never">
      <div class="mb-10px">
        <el-table
          ref="dataTableRef"
          v-loading="loading"
          :data="pageData"
          highlight-current-row
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column key="status" label="状态" prop="status" min-width="60" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.status == 0" type="info">入库前</el-tag>
              <el-tag v-if="scope.row.status == 1" type="primary">已申请</el-tag>
              <el-tag v-if="scope.row.status == 2" type="success">已执行</el-tag>
              <el-tag v-if="scope.row.status == 3" type="danger">已撤回</el-tag>
              <el-tag v-if="scope.row.status == 4" type="warning">已作废</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            key="operatorName"
            label="操作人名称"
            prop="operatorName"
            min-width="60"
            align="center"
          />
          <el-table-column
            key="operatorTime"
            label="操作时间"
            prop="operatorTime"
            min-width="80"
            align="center"
          />
          <el-table-column
            key="content"
            label="回撤原因"
            prop="content"
            min-width="350"
            align="center"
          />
        </el-table>

        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="handleQuery()"
        />
      </div>
    </el-card>
  </el-dialog>
</template>

<script setup lang="ts">
import ImportXmlAPI, {
  ImportProcessPageVO,
  ImportProcessForm,
  getProcessPage,
} from "@/api/project/import-xml";

const visible = ref(false);
const loading = ref(false);

const total = ref(0);

const queryParams = reactive<ImportProcessPageQuery>({
  pageNum: 1,
  pageSize: 10,
});

// 导入过程表格数据
const pageData = ref<ImportProcessPageVO[]>([]);

// 关闭弹窗
const handleClose = () => {
  visible.value = false;
};

/** 查询导入过程 */
function handleQuery(id) {
  loading.value = true;
  queryParams.importXmlId = id;
  ImportXmlAPI.getProcessPage(queryParams)
    .then((data) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

// 接收公告详情
const openProcess = async (id: string) => {
  visible.value = true;
  handleQuery(id);
};

defineExpose({
  openProcess,
});
</script>

<style scoped></style>
